"use client";

/**
 * /w/:workspace/settings/developers — Developers hub (TASK-0128 + 0130).
 *
 * Tabs (TASK-0130): Overview · API keys · Webhooks · Events · Curl examples.
 *
 * - Overview: base URL, copyable quickstart (pages + API-key + OAuth2 +
 *   webhook-signature verification), links to /docs/api + the OpenAPI UI.
 * - API keys (GET/POST /workspaces/:id/api-keys, …/api-keys/:id): the raw
 *   key (`fk_live_…`) is revealed EXACTLY ONCE (ApiKeyRevealDialog); the
 *   list never includes it; scopes READ / WRITE / ADMIN (implied).
 * - Webhooks: list/create/rotate/pause/delete + the per-webhook
 *   DeliveryInspector (log + payload/signature drawer + test send +
 *   resubmit dead). Create/rotate reveal the secret ONCE.
 * - Events: the shared WEBHOOK_EVENT_CATALOG (single source of truth —
 *   description, rendered payload schema, copyable example per event).
 * - Curl examples: per-resource snippets from docs/api/*.md (key placeholder).
 *
 * PERMISSIONS (server is authoritative — AGENTS rule 19): the server
 * enforces OWNER/ADMIN (403 `requires_workspace_role` otherwise) and
 * rejects API-key callers (`requires_user_credentials`). The UI hides the
 * tab for non-owners/admins as UX only.
 */
import { useState } from "react";
import { useParams } from "next/navigation";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Plus } from "lucide-react";
import { toast } from "@/stores/ui-store";
import { apiFetch } from "@/lib/api";
import { API_BASE } from "@/lib/constants";
import { useWorkspace } from "@/hooks/use-workspace";
import { SettingsShell, Section } from "@/components/settings/settings-shell";
import { ApiKeyCreateDialog } from "@/components/settings/api-keys/ApiKeyCreateDialog";
import { ApiKeyRevealDialog } from "@/components/settings/api-keys/ApiKeyRevealDialog";
import { ApiKeyTable, type ApiKeyRow } from "@/components/settings/api-keys/ApiKeyTable";
import { OverviewTab } from "@/components/settings/webhooks/OverviewTab";
import { WebhooksTab } from "@/components/settings/webhooks/WebhooksTab";
import { EventExplorer } from "@/components/settings/webhooks/EventExplorer";
import { CurlExamples } from "@/components/settings/webhooks/CurlExamples";
import { cn } from "@/lib/utils";

type Tab = "overview" | "keys" | "webhooks" | "events" | "curl";

/** Accepts a bare array or a { data: […] } envelope (API conventions). */
function unwrap<T>(body: unknown): T[] {
  const b = body as { data?: T[] } | T[] | null;
  if (Array.isArray(b)) return b;
  if (b && typeof b === "object" && Array.isArray((b as { data?: T[] }).data))
    return (b as { data: T[] }).data;
  return [];
}

export default function SettingsDevelopersPage() {
  const params = useParams<{ workspace: string }>();
  const slugOrId = params?.workspace ?? "";
  const { data: ws, isLoading } = useWorkspace(slugOrId);
  const wid = ws?.id ?? "";
  const [tab, setTab] = useState<Tab>("keys");
  // The API returns UPPERCASE roles (the Prisma enum); the web type is
  // lowercase — normalize like the other settings pages.
  const role = (ws?.role ?? "").toLowerCase();
  const isAdminRole = role === "owner" || role === "admin";

  return (
    <SettingsShell
      title="Developers"
      description="Integrate with the Factory API: quickstart, keys, webhooks, events and curl examples."
      active="developers"
    >
      {isLoading || !ws ? (
        <div className="space-y-3" aria-label="Loading developers settings">
          {[0, 1, 2].map((i) => (
            <div key={i} className="h-24 animate-pulse rounded-lg bg-muted/60" />
          ))}
        </div>
      ) : !isAdminRole ? (
        // UX-only guard (rule 19 — the server enforces 403); a direct URL
        // still resolves here, so say plainly who may act.
        <Section
          title="Owner or Admin required"
          description="Creating, listing and revoking API keys requires the Owner or Admin role in this workspace."
        >
          <p className="text-sm text-muted-foreground">
            Ask a workspace owner to manage API keys for you, or request the Admin role.
          </p>
        </Section>
      ) : (
        <div className="space-y-5">
          <div
            role="tablist"
            aria-label="Developers sections"
            className="flex gap-1 border-b border-border"
          >
            {(
              [
                { id: "overview", label: "Overview" },
                { id: "keys", label: "API keys" },
                { id: "webhooks", label: "Webhooks" },
                { id: "events", label: "Events" },
                { id: "curl", label: "Curl examples" },
              ] as { id: Tab; label: string }[]
            ).map((t) => (
              <button
                key={t.id}
                role="tab"
                aria-selected={tab === t.id}
                type="button"
                onClick={() => setTab(t.id)}
                className={cn(
                  "rounded-t-md px-3 py-2 text-sm",
                  tab === t.id
                    ? "border-b-2 border-primary font-medium text-foreground"
                    : "text-muted-foreground hover:text-foreground",
                )}
              >
                {t.label}
              </button>
            ))}
          </div>
          {tab === "overview" ? <OverviewTab workspaceSlug={slugOrId} /> : null}
          {tab === "keys" ? <ApiKeys workspaceId={wid} /> : null}
          {tab === "webhooks" ? <WebhooksTab workspaceId={wid} /> : null}
          {tab === "events" ? (
            <Section
              title="Event catalog"
              description="Every event a webhook can subscribe to — the shared catalog drives the dispatcher, the API and this explorer."
            >
              <EventExplorer />
            </Section>
          ) : null}
          {tab === "curl" ? <CurlExamples workspaceSlug={slugOrId} /> : null}
        </div>
      )}
    </SettingsShell>
  );
}

/* ------------------------------------------------------------- API keys */

function ApiKeys({ workspaceId }: { workspaceId: string }) {
  const qc = useQueryClient();
  const [createOpen, setCreateOpen] = useState(false);
  const [reveal, setReveal] = useState<{ rawKey: string; name: string } | null>(null);
  const [revokingId, setRevokingId] = useState<string | null>(null);

  const keys = useQuery({
    queryKey: ["workspaces", workspaceId, "api-keys"],
    queryFn: async (): Promise<ApiKeyRow[]> =>
      unwrap<ApiKeyRow>(await apiFetch(`/workspaces/${workspaceId}/api-keys`)),
    enabled: !!workspaceId,
  });

  const create = useMutation({
    mutationFn: async (input: {
      name: string;
      scopes: string[];
      rateLimit?: number;
      expiresAt?: string;
    }) => {
      const res = await apiFetch<{ key: string }>(`/workspaces/${workspaceId}/api-keys`, {
        method: "POST",
        body: input,
      });
      return res;
    },
    onSuccess: () => qc.invalidateQueries({ queryKey: ["workspaces", workspaceId, "api-keys"] }),
  });

  const revoke = useMutation({
    mutationFn: (id: string) =>
      apiFetch(`/workspaces/${workspaceId}/api-keys/${id}`, { method: "DELETE" }),
    onMutate: (id) => setRevokingId(id),
    onSettled: () => setRevokingId(null),
    onSuccess: () => qc.invalidateQueries({ queryKey: ["workspaces", workspaceId, "api-keys"] }),
    onError: (e) => toast("error", (e as Error).message || "Could not revoke the key."),
  });

  // The API origin (already includes /api/v1 — the web has no Next /api
  // proxy, it calls the API directly).
  const baseApiUrl = API_BASE;

  return (
    <Section
      title="API keys"
      description="Authenticate server-to-server calls. The raw key is shown once, at creation."
    >
      <div className="mb-3 flex justify-end">
        <button
          type="button"
          onClick={() => setCreateOpen(true)}
          className="inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1.5 text-sm font-medium text-white hover:opacity-90"
          data-testid="apikey-create-open"
        >
          <Plus className="size-3.5" aria-hidden />
          Create API key
        </button>
      </div>

      <ApiKeyTable
        rows={keys.data ?? []}
        isLoading={keys.isLoading}
        baseApiUrl={baseApiUrl}
        workspaceId={workspaceId}
        onRevoke={(row) => revoke.mutate(row.id)}
        revokingId={revokingId}
        onCreate={() => setCreateOpen(true)}
      />

      <ApiKeyCreateDialog
        open={createOpen}
        onClose={() => setCreateOpen(false)}
        onCreated={(k) => {
          setCreateOpen(false);
          setReveal(k);
        }}
        create={create.mutateAsync}
        isPending={create.isPending}
      />

      {reveal ? (
        <ApiKeyRevealDialog
          open
          rawKey={reveal.rawKey}
          keyName={reveal.name}
          onConfirmed={() => setReveal(null)}
        />
      ) : null}
    </Section>
  );
}